<template>
  <div>
    <van-cell>
      <div style="display: flex">
        <van-image
          width="50"
          height="50"
          round
          fit="cover"
          :src="current.aut_photo"
        />

        <div style="flex: 1; margin-left: 20px">
          <div style="color: #6f6baa">{{ current.aut_name }}</div>
          <div style="margin: 15px 0">{{ current.content }}</div>
          <div>
            <span style="color: gray">{{ current.pubdate | relvTime }}</span>
          </div>
        </div>
      </div>
    </van-cell>

    <van-divider>回复列表</van-divider>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in list" :key="item.com_id">
        <div style="display: flex">
          <van-image
            width="50"
            height="50"
            round
            fit="cover"
            :src="item.aut_photo"
          />

          <div style="flex: 1; margin-left: 20px">
            <div style="color: #6f6baa">{{ item.aut_name }}</div>
            <div style="margin: 15px 0">{{ item.content }}</div>
            <div>
              <span style="color: gray">{{ item.pubdate | relvTime }}</span>
              
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>

    <!-- 发表评论区域 -->
    <div style="position: fixed; left: 0; bottom: 0; width: 100vw">
      <van-field
        @keyup.enter="send"
        v-model="sms"
        center
        clearable
        placeholder="请输入评论内容"
      >
        <template #button>
          <van-button @click="send" size="small" type="info">发布</van-button>
        </template>
      </van-field>
    </div>
  </div>
</template>

<script>
export default {
  props: ['current'],
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      // 评论输入内容
      sms: "",
      offset: null,
    };
  },
  methods: {
    async onLoad() {
      let res = await this.$axios({
        url: "/v1_0/comments",
        params: {
          type: "c",
          source: this.current.com_id,
          offset: this.offset,
        },
      });

      this.offset = res.data.data.last_id;
      this.list.push(...res.data.data.results);
      // 本次请求完了要记得把loading改成false
      this.loading = false;

      // 如何判断已加载完成？
      //  当本次的last_id等于end_id就代表查完了
      if (res.data.data.last_id == res.data.data.end_id) {
        this.finished = true;
      }
    },

    async send() {
      // 如果不为空才发请求
      if (this.sms != "") {
        let res = await this.$axios({
          url: "/v1_0/comments",
          method: "post",
          data: {
            target: this.current.com_id,
            content: this.sms,
            art_id: this.$route.query.id
          },
        });

        // 把添加后的评论数据加到数组里的第一个位置
        this.list.unshift(res.data.data.new_obj);
        // 提示
        this.$toast.success("评论成功");
        // 清空输入内容
        this.sms = "";
        // 还要让当前这条评论的评论数量+1
        this.current.reply_count++
      }
    },
  },
};
</script>

<style>
</style>